<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-section">
				<picker 
					mode="selector"
					:range="unitList"
					range-key="name"
					:value="unitIndex"
					@change="onUnitChange"
					class="unit-picker"
				>
					<view class="unit-box">
						<text>{{ unitList[unitIndex].name }}</text>
						<text class="iconfont icon-arrow">&#xe6b9;</text>
					</view>
				</picker>
				<picker 
					mode="selector"
					:range="roomOptions"
					range-key="roomName"
					:value="roomIndex"
					@change="onRoomChange"
					class="room-picker"
					:disabled="!isRoomPickerEnabled"
				>
					<view class="room-box" :class="{'disabled': !isRoomPickerEnabled}">
						<text>{{ isRoomPickerEnabled ? roomOptions[roomIndex].roomName : '请先选择单元' }}</text>
						<text class="iconfont icon-arrow">&#xe6b9;</text>
					</view>
				</picker>
			</view>
		</view>
		
		<!-- 房间状态统计 -->
		<view class="stats-cards">
			<view class="stat-card" 
				:class="{'active': currentFilter === 'nolock'}" 
				@click="handleFilter('nolock')"
			>
				<view class="stat-value">{{ deviceStats.weakSignalCount || 0 }}</view>
				<view class="stat-label">信号低于80</view>
			</view>
			
			<view class="stat-card" 
				:class="{'active': currentFilter === 'inactive'}" 
				@click="handleFilter('inactive')"
			>
				<view class="stat-value">{{ deviceStats.unactivatedCount || 0 }}</view>
				<view class="stat-label">有锁未激活</view>
			</view>
			
			<view class="stat-card" 
				:class="{'active': currentFilter === 'lowBattery'}" 
				@click="handleFilter('lowBattery')"
			>
				<view class="stat-value">{{ deviceStats.lowBatteryCount || 0 }}</view>
				<view class="stat-label">电量低于30</view>
			</view>
			
			<view class="stat-card" 
				:class="{'active': currentFilter === 'dateError'}" 
				@click="handleFilter('dateError')"
			>
				<view class="stat-value">{{ deviceStats.dateErrorCount || 0 }}</view>
				<view class="stat-label">日期错误</view>
			</view>
			
			<view class="stat-card" 
				:class="{'active': currentFilter === 'adminError'}" 
				@click="handleFilter('adminError')"
			>
				<view class="stat-value">{{ deviceStats.adminErrorCount || 0 }}</view>
				<view class="stat-label">管理员异常</view>
			</view>
			
			<view class="stat-card" 
				:class="{'active': currentFilter === 'noComm'}" 
				@click="handleFilter('noComm')"
			>
				<view class="stat-value">{{ deviceStats.noCommCount || 0 }}</view>
				<view class="stat-label">2天未通讯</view>
			</view>
		</view>
		
		<!-- 设备列表 -->
		<view class="room-list-container">
			<view class="empty-box" v-if="deviceList.length === 0">
				<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无设备数据</text>
			</view>
			<view class="device-list" v-else>
				<view class="device-item" v-for="(device, index) in deviceList" :key="index">
					<view class="device-card">
						<view class="device-header">
							<view class="location-info">
								<text class="iconfont icon-location"></text>
								<text>{{ device.cellName || '' }}{{ device.unitName ? '-' + device.unitName : '' }}{{ device.floorName ? '-' + device.floorName : '' }}{{ device.roomName ? '-' + device.roomName : '' }}</text>
							</view>
							<view class="device-status" :class="{'status-normal': device.batteryLevel >= 30, 'status-warning': device.batteryLevel < 30 && device.batteryLevel >= 20, 'status-danger': device.batteryLevel < 20}">
								<text class="battery-text">{{ device.batteryLevel }}%</text>
							</view>
						</view>
						
						<view class="device-content">
							<view class="info-group">
								<view class="info-item full-width">
									<text class="iconfont icon-mac"></text>
									<text class="label">MAC</text>
									<text class="value">{{ device.mac }}</text>
									<text class="copy-btn" @click="copyText(device.mac)">复制</text>
								</view>
								<view class="info-item full-width">
									<text class="iconfont icon-device"></text>
									<text class="label">IMEI</text>
									<text class="value">{{ device.imei }}</text>
									<text class="copy-btn" @click="copyText(device.imei)">复制</text>
								</view>
								<view class="info-item full-width">
									<text class="iconfont icon-volt"></text>
									<text class="label">电压</text>
									<text class="value">{{ device.volt }}V</text>
								</view>
								<view class="info-item full-width">
									<text class="iconfont icon-signal"></text>
									<text class="label">信号</text>
									<text class="value" :class="{'text-warning': device.rssi < 80}">{{ device.rssi }}</text>
								</view>
							</view>
							<view class="device-footer">
								<view class="communication-time">
									<text class="iconfont icon-time"></text>
									<text>最后通讯：{{ device.lastCommunication }}</text>
								</view>
								<view class="device-actions">
									<text class="action-btn" @click="handleViewDetail(device)">查看详情</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listHome2 } from "@/api/lock/home";
	import { listDevice, getUnactivatedLockCount, getWeakSignalLockCount, getAbnormalDateLockCount, getAbnormalAdminPwdCount, getLowBatteryLockCount, getNoCommLockCount } from "@/api/lock/device";
	import { getLockUnitList } from '@/api/lock/lock';

	export default {
		data() {
			return {
				roomList: [], // 设备列表
				roomOptions: [{ id: '', roomName: '请选择房间' }],
				selectedRoom: null, // 选中的房间
				roomIndex: 0, // 当前选中的房间索引
				unitList: [{ id: '', name: '全部单元' }],
				unitIndex: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					unitId: null
				},
				loading: false,
				deviceList: [], // 设备列表数据
				currentFilter: 'nolock', // 默认选中信号弱的设备
				deviceStats: {
					weakSignalCount: 0,
					unactivatedCount: 0,
					lowBatteryCount: 0,
					dateErrorCount: 0,
					adminErrorCount: 0,
					noCommCount: 0
				},
				hasMore: true, // 是否还有更多数据
				isLoadingMore: false, // 是否正在加载更多
				enablePullDownRefresh: true, // 启用下拉刷新
			}
		},
		computed: {
			// 计算房间选择器是否可用
			isRoomPickerEnabled() {
				const selectedUnit = this.unitList[this.unitIndex];
				return selectedUnit && selectedUnit.id; // 只有选择了具体单元才启用
			}
		},
		onLoad(options) {
			// 加载数据
			this.getUnitList();
			this.getDeviceStats();
			
			// 从链接参数获取过滤条件
			if (options.filter) {
				this.currentFilter = options.filter;
				this.handleFilter(options.filter);
			} else {
				// 默认加载信号弱的设备列表
				this.getDeviceList();
			}
			
			// 从链接参数获取搜索条件
			if (options.roomName) {
				this.selectedRoom = { roomName: options.roomName };
				this.queryParams.roomName = options.roomName;
			}
		},
		onPullDownRefresh() {
			// 重置分页参数
			this.queryParams.pageNum = 1;
			this.hasMore = true;
			
			// 刷新数据
			Promise.all([
				this.getDeviceList(),
				this.getDeviceStats()
			]).then(() => {
				// 刷新成功提示
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1500
				});
			}).catch(error => {
				console.error('刷新数据失败：', error);
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				});
			}).finally(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (!this.hasMore || this.loading || this.isLoadingMore) return;
			
			this.isLoadingMore = true;
			this.queryParams.pageNum += 1;
			this.getDeviceList(true);
		},
		methods: {
			// 获取设备列表
			getDeviceList(isLoadMore = false) {
				if (this.loading) return;
				
				this.loading = true;
				const params = {
					...this.queryParams
				};
				
				listDevice(params).then(res => {
					if (res.code === 200) {
						const list = res.rows || [];
						// 判断是否还有更多数据
						this.hasMore = list.length === this.queryParams.pageSize;
						
						if (isLoadMore) {
							// 加载更多时，追加数据
							this.deviceList = [...this.deviceList, ...list];
						} else {
							// 首次加载或刷新时，替换数据
							this.deviceList = list;
						}
					}
				}).catch(err => {
					console.error('获取设备列表失败：', err);
					uni.showToast({
						title: '获取设备列表失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
					this.isLoadingMore = false;
				});
			},
			
			// 获取房间列表
			getRoomList() {
				this.loading = true;
				// 移除unitId参数，获取所有房间
				const params = {
					...this.queryParams,
					unitId: null
				};
				
				listHome2(params).then(res => {
					if (res.code === 200) {
						this.roomList = res.rows || [];
						// 更新房间选项列表
						this.roomOptions = [
							{ id: '', roomName: '全部房间' },
							...this.roomList
						];
						// 重置房间选择为"全部"
						this.roomIndex = 0;
						this.selectedRoom = this.roomOptions[0];
						// 触发选择房间的逻辑
						this.handleRoomSelection();
					}
				}).catch(err => {
					console.error('获取房间列表失败：', err);
					uni.showToast({
						title: '获取房间列表失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
			
			// 获取统计数据
			getRoomStats() {
				const params = {
					unitId: this.queryParams.unitId,
					roomId: this.queryParams.roomId
				};
				
				roomStatistics(params).then(response => {
					if (response.code === 200) {
						this.roomStats = response.data;
					}
				}).catch(error => {
					console.error('获取统计数据失败：', error);
				});
			},
			
			// 根据单元过滤房间
			filterRoomsByUnit() {
				const selectedUnit = this.unitList[this.unitIndex];
				
				// 获取房间列表时只传unitId
				const params = {
					unitId: selectedUnit.id || null
				};
				
				this.loading = true;
				listHome2(params).then(res => {
					if (res.code === 200) {
						this.roomList = res.rows || [];
						// 更新房间选项列表
						this.roomOptions = [
							{ id: '', roomName: '全部房间' },
							...this.roomList
						];
						// 重置房间选择为"全部"
						this.roomIndex = 0;
						this.selectedRoom = this.roomOptions[0];
					}
				}).catch(err => {
					console.error('获取房间列表失败：', err);
					uni.showToast({
						title: '获取房间列表失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},

			// 获取单元列表
			getUnitList() {
				getLockUnitList().then(res => {
					if (res.code === 200 && res.rows) {
						this.unitList = [
							{ id: '', name: '全部单元' },
							...res.rows
						];
						// 初始化时获取所有房间
						this.filterRoomsByUnit();
					}
				}).catch(err => {
					console.error('获取单元列表失败', err);
				});
			},

			// 获取设备统计数据
			async getDeviceStats() {
				// 构建基础参数，包含单元和房间ID
				const baseParams = {
					unitId: this.queryParams.unitId,
					homeId: this.queryParams.homeId
				};
				
				try {
					// 获取信号弱的锁数量（信号低于80）
					const weakSignalRes = await getWeakSignalLockCount(baseParams);
					if (weakSignalRes.code === 200) {
						this.deviceStats.weakSignalCount = weakSignalRes.data;
					}
					
					// 获取未激活锁数量（电量为空或未设置）
					const unactivatedRes = await getUnactivatedLockCount(baseParams);
					if (unactivatedRes.code === 200) {
						this.deviceStats.unactivatedCount = unactivatedRes.data;
					}
					
					// 获取时间异常的锁数量（大于2037年）
					const dateErrorRes = await getAbnormalDateLockCount(baseParams);
					if (dateErrorRes.code === 200) {
						this.deviceStats.dateErrorCount = dateErrorRes.data;
					}
					
					// 获取管理员密码异常的锁数量（密码长度小于6位或未设置）
					const adminErrorRes = await getAbnormalAdminPwdCount(baseParams);
					if (adminErrorRes.code === 200) {
						this.deviceStats.adminErrorCount = adminErrorRes.data;
					}

					// 获取电量低的锁数量（电量低于30%）
					const lowBatteryRes = await getLowBatteryLockCount(baseParams);
					if (lowBatteryRes.code === 200) {
						this.deviceStats.lowBatteryCount = lowBatteryRes.data;
					}

					// 获取3天未通讯的锁数量
					const noCommRes = await getNoCommLockCount(baseParams);
					if (noCommRes.code === 200) {
						this.deviceStats.noCommCount = noCommRes.data;
					}
					
				} catch (error) {
					console.error('获取设备统计数据失败：', error);
					uni.showToast({
						title: '获取统计数据失败',
						icon: 'none'
					});
				}
			},

			// 处理单元选择变化
			onUnitChange(e) {
				this.unitIndex = Number(e.detail.value);
				const selectedUnit = this.unitList[this.unitIndex];
				
				// 更新查询参数中的单元ID
				this.queryParams.unitId = selectedUnit.id || null;
				
				// 重置房间选择
				this.roomIndex = 0;
				this.selectedRoom = this.roomOptions[0];
				this.queryParams.homeId = null;
				
				// 如果选择了具体单元，则获取房间列表
				if (selectedUnit.id) {
					this.filterRoomsByUnit();
				} else {
					// 如果选择了全部单元，清空房间列表
					this.roomOptions = [{ id: '', roomName: '请选择房间' }];
				}
				
				// 重置列表并更新数据
				this.resetList();
				this.getDeviceStats();
			},
			
			// 处理房间选择
			onRoomChange(e) {
				if (!this.isRoomPickerEnabled) {
					return;
				}
				
				this.roomIndex = Number(e.detail.value);
				this.selectedRoom = this.roomOptions[this.roomIndex];
				
				// 更新查询参数中的房间ID
				this.queryParams.homeId = this.selectedRoom.id || null;
				
				// 重置列表并更新数据
				this.resetList();
				this.getDeviceStats();
			},
			
			// 处理房间选择后的逻辑
			handleRoomSelection() {
				const selectedUnit = this.unitList[this.unitIndex];
				const selectedRoom = this.roomOptions[this.roomIndex];
				
				// 只更新单元和房间ID
				this.queryParams = {
					...this.queryParams,
					unitId: selectedUnit.id || null,
					homeId: selectedRoom.id || null
				};
				
				// 重置列表并更新数据
				this.resetList();
				this.getDeviceStats();
			},
			
			// 重置列表
			resetList() {
				this.deviceList = [];
				this.queryParams.pageNum = 1;
				this.hasMore = true;
				this.getDeviceList();
			},
			
			// 处理过滤条件变化
			handleFilter(type) {
				this.currentFilter = type;
				
				// 保留当前的单元和房间ID
				const currentUnitId = this.queryParams.unitId;
				const currentHomeId = this.queryParams.homeId;
				
				// 重置查询参数
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					unitId: currentUnitId,
					homeId: currentHomeId
				};
				
				// 根据不同类型设置对应的查询参数
				switch (type) {
					case 'nolock':
						this.queryParams.rssi = '-80';
						break;
					case 'inactive':
						this.queryParams.searchMac = '1';
						break;
					case 'lowBattery':
						this.queryParams.batteryLevel = 30;
						break;
					case 'dateError':
						this.queryParams.isDateError = '1';
						break;
					case 'adminError':
						this.queryParams.pwd = '1';
						break;
					case 'noComm':
						this.queryParams.isNoComm = '1';
						break;
				}
				
				// 重置列表并获取数据
				this.resetList();
			},
			
			// 应用过滤条件
			applyFilter(type) {
				switch (type) {
					case 'rented':
						this.queryParams.tenantCount = 1; // 已租
						break;
					case 'vacant':
						this.queryParams.tenantCount = 0; // 闲置
						break;
					default:
						this.queryParams.tenantCount = null; // 全部
						break;
				}
			},
			
			// 获取电池颜色
			getBatteryColor(level) {
				if (level >= 80) {
					return '#67C23A';
				} else if (level >= 50) {
					return '#E6A23C';
				} else {
					return '#F56C6C';
				}
			},
			
			// 处理查看详情
			handleViewDetail(device) {
				if (!device || !device.homeId) {
					uni.showToast({
						title: '无法获取房间信息',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/room/details?id=${device.homeId}`
				});
				// uni.navigateTo({
				// 	url: `/pages/room/components/smartlocks?roomId=${device.homeId}`
				// });
			},
			
			// 复制文本
			copyText(text) {
				if (!text) {
					uni.showToast({
						title: '无内容可复制',
						icon: 'none'
					});
					return;
				}
				uni.setClipboardData({
					data: String(text),
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-location:before {
		content: "\e758";
	}

	.icon-battery:before {
		content: "\e60c";
	}

	.icon-mac:before {
		content: "\e6df";
	}

	.icon-device:before {
		content: "\e645";
	}

	.icon-volt:before {
		content: "\e60e";
	}

	.icon-signal:before {
		content: "\e7ed";
	}

	.icon-time:before {
		content: "\e65f";
	}
	
	.text-warning {
		color: #E6A23C !important;
	}

	.content {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	
	.search-box {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		
		.search-section {
			display: flex;
			align-items: stretch;
			gap: 2rpx;
			background: #f5f7fa;
			border-radius: 35rpx;
			padding: 0;
		}
		
		.unit-picker, .room-picker {
			flex: 1;
		}
		
		.unit-box, .room-box {
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			background: #f5f7fa;
			font-size: 28rpx;
			color: #333;
			transition: all 0.3s;
			
			&:active {
				background: #e8ebf0;
			}
			
			text {
				&:first-child {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-right: 10rpx;
				}
			}
			
			.icon-arrow {
				font-size: 24rpx;
				color: #666;
				margin-left: 8rpx;
				flex-shrink: 0;
			}
		}
		
		.unit-box {
			border-radius: 35rpx 0 0 35rpx;
		}
		
		.room-box {
			border-radius: 0 35rpx 35rpx 0;
			&.disabled {
				opacity: 0.5;
				background: #f5f5f5;
				pointer-events: none;
			}
		}
	}
	
	.stats-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin: 30rpx 0;
		padding: 0 20rpx;
	}
	
	.stat-card {
		width: calc((100% - 40rpx) / 3);
		height: 180rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		cursor: pointer;
		border: 2rpx solid #eee;
		
		&.active {
			background: #409EFF;
			border-color: #409EFF;
			
			.stat-value, .stat-label {
				color: #fff;
			}
		}
		
		&:active {
			opacity: 0.9;
		}
		
		.stat-value {
			font-size: 44rpx;
			font-weight: bold;
			color: #333;
			line-height: 1.2;
			margin-bottom: 12rpx;
		}
		
		.stat-label {
			font-size: 26rpx;
			color: #666;
			line-height: 1;
		}
	}
	
	.room-list-container {
		margin-top: 30rpx;
		padding: 0 20rpx;
	}
	
	.empty-box {
		padding: 120rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 0;
		
		.empty-image {
			width: 240rpx;
			height: 240rpx;
			margin-bottom: 30rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #909399;
		}
	}
	
	.device-list {
		.device-item {
			margin-bottom: 20rpx;
			
			.device-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				
				&:active {
					transform: scale(0.98);
				}
				
				.device-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx;
					background: linear-gradient(to right, #f8f9fa, #fff);
					border-bottom: 1px solid #f5f5f5;
					
					.location-info {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						
						.iconfont {
							color: #409EFF;
							margin-right: 10rpx;
							font-size: 32rpx;
						}
					}
					
					.device-status {
						display: flex;
						align-items: center;
						padding: 6rpx 16rpx;
						border-radius: 20rpx;
						background: rgba(103, 194, 58, 0.1);
						
						&.status-normal {
							background: rgba(103, 194, 58, 0.1);
							color: #67C23A;
						}
						
						&.status-warning {
							background: rgba(230, 162, 60, 0.1);
							color: #E6A23C;
						}
						
						&.status-danger {
							background: rgba(245, 108, 108, 0.1);
							color: #F56C6C;
						}
						
						.iconfont {
							font-size: 28rpx;
							margin-right: 6rpx;
						}
						
						.battery-text {
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
				
				.device-content {
					padding: 24rpx;
					
					.info-group {
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						margin-bottom: 24rpx;
						
						.info-item {
							display: flex;
							align-items: center;
							padding: 16rpx 0;
							border-bottom: 1px solid #f5f5f5;
							
							&.full-width {
								width: 100%;
							}
							
							.iconfont {
								font-size: 32rpx;
								color: #409EFF;
								margin-right: 10rpx;
							}
							
							.label {
								font-size: 26rpx;
								color: #909399;
								margin-right: 16rpx;
								min-width: 60rpx;
							}
							
							.value {
								font-size: 26rpx;
								color: #333;
								flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								
								&.text-warning {
									color: #E6A23C;
								}
							}
						}
					}
					
					.device-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 20rpx;
						border-top: 1px solid #f5f5f5;
						
						.communication-time {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #909399;
							
							.iconfont {
								margin-right: 6rpx;
								font-size: 28rpx;
							}
						}
						
						.device-actions {
							.action-btn {
								font-size: 24rpx;
								color: #409EFF;
								background: rgba(64, 158, 255, 0.1);
								padding: 6rpx 16rpx;
								border-radius: 20rpx;
								
								&:active {
									opacity: 0.8;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.status-online {
		background-color: rgba(103, 194, 58, 0.1);
		color: #67C23A;
	}
	
	.status-offline {
		background-color: rgba(144, 147, 153, 0.1);
		color: #909399;
	}
	
	.copy-btn {
		font-size: 24rpx;
		color: #409EFF;
		background: rgba(64, 158, 255, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-left: 16rpx;
		
		&:active {
			opacity: 0.8;
		}
	}
</style>
